<template>
  <div class="upload-media-file">
    <div class="file-list" tag="div" name="drag">
      <div class="file-item" v-for="(item, index) in props.fileList" draggable="true" @dragstart="dragstart(index)"
        @dragenter="dragenter($event, index)" @dragend="dragend($event, index)" :key="index"
        :class="{ active: index == dragData.startIndex || index == dragData.currentIndex }">
        <img :src="item" alt="" v-if="getSuffix(item).type == 1">
        <video :src="item" v-else></video>
        <div class="del-icon" @click="delFile(index)">
          <el-icon>
            <DeleteFilled />
          </el-icon>
        </div>
      </div>
      <el-upload action="#" list-type="text" :http-request="httpRequest" :limit="9" class="upload-media-file"
        :show-file-list="false" :before-upload="beforeAvatarUpload">
        <div class="upload-icon" v-if="(props.fileList.length < 9)" v-loading="isLoad"
          element-loading-background="rgba(122, 122, 122, 0.8)">
          <el-icon v-if="!isLoad">
            <Plus />
          </el-icon>
        </div>
      </el-upload>
    </div>
    <div class="el-upload__tip">
      提示：可拖拽图片调整顺序，最多上传9张图片，图片大小不超过10M，视频大小不超过10M<br />
      注：基础版最大支持上传1张图片，立即获取 更多图片上传
    </div>
  </div>

</template>
<script setup>
import { ElMessage } from 'element-plus';

let isLoad = ref(false)

let props = defineProps({
  fileList: {
    type: Array,
    default: []
  }
})

let emit = defineEmits(['returnUrl'])


let medias = ['.mp4', '.avi', '.mov']
let images = ['.jpg', '.jpeg', '.png']
const getSuffix = (name) => {
  let suffix = name.substring(name.lastIndexOf("."))
  if (images.indexOf(suffix) > -1) return {
    type: 1,
    suffix
  }
  if (medias.indexOf(suffix) > -1) return {
    type: 2,
    suffix
  }
}
const beforeAvatarUpload = (rawFile) => {
  if (!getSuffix(rawFile.name)) {
    ElMessage.error(`文件格式不合法，仅支持${medias}${images}`)
    return false
  }
  let maxSize = 10485760
  if (rawFile.size > maxSize) {
    ElMessage.error("文件过大，最大支持10M")
    return false
  }
  return true
}

const httpRequest = ({ file }) => {
  isLoad.value = true
  const formData = new FormData();
  formData.append("file", file);
  $axios.post('/merchant-product/madmin/product/uploadVideo', formData, {
    'Content-type': 'multipart/form-data'
  }).then(res => {
    props.fileList.push(res.data)
    emit('returnUrl', res.data)
    isLoad.value = false
  }).catch(err => {
    isLoad.value = false
  })
}

// 拖拽排序
let dragData = reactive({
  startIndex: null,
  currentIndex: null,
  endIndex: null,
  timer: null
})

const dragstart = (i) => {
  dragData.startIndex = i
}

const dragenter = (e, i) => {
  e.preventDefault();
  clearTimeout(dragData.timer)
  dragData.timer = null
  dragData.currentIndex = i
  dragData.timer = setTimeout(() => {
    let startIndex = dragData.startIndex
    let currentIndex = i
    if (startIndex == currentIndex) return
    let startItem = props.fileList[startIndex]
    props.fileList.splice(startIndex, 1)
    props.fileList.splice(i, 0, startItem)
    dragData.startIndex = currentIndex
  }, 300)
}

const dragend = (e, i) => {
  dragData.startIndex = null
  dragData.currentIndex = null
  dragData.endIndex = null
  clearTimeout(dragData.timer)
  dragData.timer = null
}


const delFile = (index) => {
  props.fileList.splice(index, 1)
}

</script> 

<style scoped>
.file-list {
  display: flex;
  flex-wrap: wrap;
}

.file-item {
  width: calc(var(--upload-picture-card-size) - 4px);
  height: calc(var(--upload-picture-card-size) - 4px);
  padding: 1px;
  margin-right: var(--margin-size-small);
  margin-bottom: var(--margin-size-small);
  overflow: hidden;
  border: 1px solid #fff;
  cursor: move;
  position: relative;
}

.file-item .del-icon {
  position: absolute;
  top: var(--margin-size-small);
  right: var(--margin-size-small);
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 50%;
  cursor: pointer;
}

.file-item.active {
  border-color: var(--color-success);
}

.file-item img,
.file-item video {
  width: 100%;
  height: 100%;
}

.upload-icon {
  width: calc(var(--upload-picture-card-size) - 2px);
  height: calc(var(--upload-picture-card-size) - 2px);
  border: 1px dashed var(--border-color);
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-icon:hover {
  border-color: var(--color-primary);
}
</style>